<template>
    <div>
        <el-dialog title="商品信息详情"
                   :visible.sync="dialogFormVisible"
                   :before-close="close"
                   :close="close"
                   center>
            <!--表单-->
            <el-form :model="goodsItem">
                <el-form-item label="商品编码" :label-width="formLabelWidth">
                    <el-input v-model="goodsItem.goodsCode" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="goodsItem.goodsName" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="商品状态" :label-width="formLabelWidth">
                    <el-input v-model="goodsItem.status" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="商品价格" :label-width="formLabelWidth">

                        <!--<el-button type="info">展开 <i class="el-icon-upload el-icon&#45;&#45;right"/></el-button>-->
                        <div v-if="goodsItem.goodsPriceList && goodsItem.goodsPriceList.length > 0" >
                            <div class="show" v-for="(item, i) in goodsItem.goodsPriceList" :key="i">
                                <div>
                                    <span>{{ item.price || 0 }}元</span> / <el-tag type="warning">{{ item.unit.unit }}</el-tag>
                                    <span style="margin-left: 20px"> 活动价格：</span> {{item.lowPrice || 0}} 元
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            暂无商品价格
                        </div>
                </el-form-item>

                <el-form-item label="商品类型" :label-width="formLabelWidth">
                    <!--<el-button type="info">展开 <i class="el-icon-upload el-icon&#45;&#45;right"/></el-button>-->
                    <div v-if="goodsItem.typeList && goodsItem.typeList.length > 0" >
                        <div v-for="(item, i) in goodsItem.typeList" :key="i">
                            <el-tag type="success">{{ item.typeName }}</el-tag>
                        </div>
                    </div>
                    <div v-else>
                        暂无商品类型
                    </div>
                </el-form-item>

                <el-form-item label="库存" :label-width="formLabelWidth">
                    <!--<el-button type="info">展开 <i class="el-icon-upload el-icon&#45;&#45;right"/></el-button>-->
                    <div v-if="goodsItem.stockList && goodsItem.stockList.length > 0">
                        <div v-for="(item, i) in goodsItem.stockList" :key="i">
                            <el-tag type="success">{{ item.count }}{{ item.unit.unit }}</el-tag>
                        </div>
                    </div>
                    <span v-else> 暂无库存 </span>
                </el-form-item>

            </el-form> <!--/ 表单-->

            <div slot="footer" class="dialog-footer">
                <!--<el-button @click="close">取 消</el-button>-->
                <el-button type="primary" @click="close">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import API from '@/api/api.js'
export default {
    name: "GoodsDetail",
    props: ['goods'],
    data() {
        return {
            dialogFormVisible: true,
            formLabelWidth: '120px',
            goodsItem: {
                goodsCode: '',
                goodsName: '',
                status: '',
                goodsPriceList: [
                    // {
                    //     unitId: '111',
                    //     unit: '罐',
                    //     price: 10,
                    // },{
                    //     unitId: '222',
                    //     unit: '打',
                    //     price: 110,
                    // },{
                    //     unitId: '333',
                    //     unit: '件',
                    //     price: 215,
                    // },
                ],
                typeList: [
                    // {
                    //     typeId: '4',
                    //     typeName: '牛奶',
                    // },{
                    //     typeId: '2',
                    //     typeName: '冷饮',
                    // },
                ],
                stockList: [
                    // {
                    //     stockId: '1',
                    //     unitId: '111',
                    //     unit: '罐',
                    //     count: '10',
                    // },{
                    //     stockId: '2',
                    //     unitId: '222',
                    //     unit: '打',
                    //     count: '5',
                    // },{
                    //     stockId: '3',
                    //     unitId: '333',
                    //     unit: '件',
                    //     count: '2',
                    // },
                ]
            },
        }
    },
    mounted() {
        this.getGoodsDetail();
        // this.goodsItem = this.goods;

    },
    methods: {
        //
        getGoodsDetail() {
            let url = API.goods.goodsQuery;
            let param = {
                goodsCode: this.goods.goodsCode,
            };
            this.$get(url, param).then(res => {
                let data = res.data;
                if (data.success) {
                    this.goodsItem = data.data;
                    this.goodsItem.status = this.goodsItem.status === '1'? '可用':'不可用';
                } else {
                    this.$message.error(data.msg);
                }
            }).catch(err => {
                this.$message.error("请求错误!")
            })
        },

        // 关闭对话框
        close() {
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-tag {
        /*display: inline;*/
    }
    .show {
        display: inline;
    }
</style>
